<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入e.js模板引擎 -->
  <script src="./ejs.js"></script>
</head>

<body>
  <div class="container">

  </div>
  <script>
    let arr = [{
      name: "程宇",
      age: 22
    },
    {
      name: "张良",
      age: 25
    },
    {
      name: "貂蝉",
      age: 18
    }]

    // let myname = "哈哈";
    // let res = ejs.render("<p>我的名字是：<%=myname%></p>", { myname: myname })
    // console.log(res);
    // document.querySelector(".container").innerHTML = res;

    // 在ejs里可以书写js代码 ，所有遇到js的代码 都需要通过ejs里的 <% %> 包括起来

    let res = ejs.render(`
      <ul>
        <% arr.forEach(item=>{ %>
          <li>姓名是：<%=item.name%>，年龄是：<%=item.age%></li>
        <% }) %>     
      </ul>`
      , { arr }); // 把arr推送到前面的模板里
    console.log(res);
    document.querySelector(".container").innerHTML = res;
  </script>
</body>

</html>